<template>
  <div class="dictionary">
    <el-card class="box-card dictionary__school">
      <!-- 添加 -->
      <div class="dictionary__school-add">
        <div class="dictionary__school-add-item">
          <div class="inputWidth">
            学校编号：
          </div>
          <input v-model="inputSchoolId"
                 class="input"
                 placeholder="请输入学校编号">
        </div>
        <div class="dictionary__school-add-item">
          <div class="inputWidth">
            学校名称：
          </div>
          <input v-model="inputSchoolName"
                 class="input"
                 placeholder="请输入学校名称">
        </div>

        <el-button size="mini"
                   type="primary"
                   @click="addSchool">
          添加学校
        </el-button>
      </div>

      <el-table ref="schoolTable"
                :data="schoolData.filter(data => !searchSchool || data.schoolName.toLowerCase().includes(searchSchool.toLowerCase()))"
                stripe
                style="width: 100%">
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">
              {{ scope.row.id }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="学校名称">
          <template slot-scope="scope">
            <div slot="reference"
                 class="name-wrapper">
              {{ scope.row.schoolName }}
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center">
          <template slot="header">
            <input v-model="searchSchool"
                   class="input"
                   size="mini"
                   placeholder="输入学校名字搜索">
          </template>
          <template slot-scope="scope">
            <el-popover v-model="scope.row.visible"
                        placement="top"
                        width="160">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini"
                           type="text"
                           @click="scope.row.visible = false">
                  取消
                </el-button>
                <el-button type="primary"
                           size="mini"
                           @click="schoolDelete(scope.$index, scope.row)">
                  确定
                </el-button>
              </div>
              <el-button slot="reference"
                         size="mini"
                         type="danger">
                删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 专业 -->

    <el-card class="box-card dictionary__dept">
      <!-- 添加 -->
      <div class="dictionary__dept-add">
        <div class="dictionary__dept-add-item">
          <div class="inputWidth">
            学科编号：
          </div>
          <input v-model="inputDeptId"
                 class="input"
                 placeholder="请输入学科编号">
        </div>

        <div class="dictionary__dept-add-item">
          <div class="inputWidth">
            学科名称：
          </div>
          <input v-model="inputDeptName"
                 class="input"
                 placeholder="请输入学科名称">
        </div>

        <el-button type="primary"
                   size="mini"
                   @click="addDept">
          添加学科
        </el-button>
      </div>
      <el-table ref="deptTable"
                :data="deptData.filter(data => !searchDept || data.deptName.toLowerCase().includes(searchDept.toLowerCase()))"
                stripe
                height="500"
                style="width: 100%"
                @scroll="tableListener">
        <el-table-column
          label="编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">
              {{ scope.row.id }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="学科名称">
          <template slot-scope="scope">
            {{ scope.row.address }}
            <div slot="reference"
                 class="name-wrapper">
              {{ scope.row.deptName }}
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center">
          <template slot="header">
            <input
              v-model="searchDept"
              class="input"
              size="mini"
              placeholder="输入学科名字搜索">
          </template>
          <template slot-scope="scope">
            <el-popover v-model="scope.row.visible"
                        placement="top"
                        width="160">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini"
                           type="text"
                           @click="scope.row.visible = false">
                  取消
                </el-button>
                <el-button type="primary"
                           size="mini"
                           @click="deptDelete(scope.$index, scope.row)">
                  确定
                </el-button>
              </div>
              <el-button slot="reference"
                         size="mini"
                         type="danger">
                删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import api from '@/api/systemUser.js'
export default {
  data () {
    return {
      searchSchool: '',
      searchDept: '',
      inputSchoolId: '',
      inputSchoolName: '',
      inputDeptId: '',
      inputDeptName: '',
      schoolData: [],
      deptData: [],
      deptPage: 1,
      schoolPage: 1,
      schoolAllPage: 1,
      deptAllPage: 1
    }
  },
  mounted () {
    this.getAllSchool()
    this.getAllDept()
    this.tableListener()
  },
  methods: {
    // 获取
    async getAllSchool () {
      api.getAllSchool(this.schoolPage).then(res => {
        this.schoolData.push(...res.result.school)
        this.schoolAllPage = res.result.pages
      })
    },
    async getAllDept () {
      api.getAllDept(this.deptPage).then(res => {
        this.deptData.push(...res.result.dept)
        this.deptAllPage = res.result.pages
      })
    },
    // 添加
    async addSchool () {
      try {
        if (this.inputSchoolId && this.inputSchoolName) {
          var params = {}
          params.id = this.inputSchoolId
          params.schoolName = this.inputSchoolName
          const res = await api.addSchool(params)
          const { code } = res
          if (code == 200) {
            this.$message({
              message: '添加成功！',
              type: 'success'
            })
            this.inputSchoolId = ''
            this.inputSchoolName = ''
            this.schoolData = []
            this.schoolPage = 1
            this.getAllSchool()
          } else {
            this.$message({
              message: '添加失败！',
              type: 'error'
            })
          }
        }
      } catch (err) {
        this.$message({
          message: '添加失败！',
          type: 'error'
        })
      }
    },
    async addDept () {
      try {
        if (this.inputDeptId && this.inputDeptName) {
          var params = {}
          params.id = this.inputDeptId
          params.deptName = this.inputDeptName
          const res = await api.addDept(params)
          const { code, message } = res
          if (code == 200) {
            this.$message({
              message: '添加成功！',
              type: 'success'
            })
            this.inputDeptId = ''
            this.inputDeptName = ''
            this.deptData = []
            this.deptPage = 1
            this.getAllDept()
          } else {
            this.$message({
              message,
              type: 'error'
            })
          }
        }
      } catch (err) {
        this.$message({
          message: '添加失败！',
          type: 'error'
        })
      }
    },
    // 删除
    async schoolDelete (index, row) {
      row.visible = false
      try {
        const res = await api.deleteSchool(row.id)
        const { code, message } = res
        if (code == 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.schoolData = []
          this.schoolPage = 1
          this.getAllSchool()
        } else {
          this.$message({
            message: `${message}`,
            type: 'error'
          })
        }
      } catch (err) {
        this.$message({
          message: '删除失败！',
          type: 'error'
        })
      }
    },
    // 删除
    async deptDelete (index, row) {
      row.visible = false
      try {
        const res = await api.deleteDept(row.id)
        const { code, message } = res
        if (code == 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.deptData = []
          this.deptPage = 1
          this.getAllDept()
        } else {
          this.$message({
            message: `${message}`,
            type: 'error'
          })
        }
      } catch (err) {
        this.$message({
          message: '删除失败！',
          type: 'error'
        })
      }
    },
    tableListener () {
      const that = this
      const deptTable = that.$refs.deptTable.bodyWrapper
      const schoolTable = that.$refs.schoolTable.bodyWrapper
      deptTable.addEventListener('scroll', function () {
        const scrollDistance = deptTable.scrollHeight - deptTable.scrollTop - deptTable.clientHeight
        if (scrollDistance <= 1) {
          if (that.deptPage < that.deptAllPage) {
            that.deptPage++
            that.getAllDept()
          }
        }
      })
      schoolTable.addEventListener('scroll', function () {
        const scrollDistance = schoolTable.scrollHeight - schoolTable.scrollTop - schoolTable.clientHeight
        if (scrollDistance <= 1) {
          if (that.schoolPage < that.schoolAllPage) {
            that.schoolPage++
            that.getAllSchool()
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dictionary {
  padding: 30px;
  display: flex;
  .box-card {
    width: 100%;
  }
  &__school {
    margin-right: 20px;
    &-add {
      margin-bottom: 24px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  &__dept {
    &-add{
      margin-bottom: 24px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.input {
    padding-left: 8px;
    margin-right: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
    width: 130px;
    height: 28px;
}
.input:focus {
  border: 1px solid #409eff;
}
.inputWidth {
  width: 72px;
}
</style>
